<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <span>首页</span>
    </template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="dep" label="部门" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template #default="{ row }">
          <span>{{ row.sex === 0 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <el-button type="primary">查看</el-button>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="add" layout="prev, pager, next" :total="50">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        // { id: 1, name: '刘1', sex: 1, dep: '总裁办' },
        // { id: 2, name: '刘2', sex: 2, dep: '总裁办' }
      ],
      num: 1
    }
  },
  created () {
    this.get(10)
  },
  methods: {
    add (i) {
      console.log(i)
      this.tableData = []
      this.num = i
      this.get(10)
    },
    get (index) {
      console.log(index)
      for (let i = 1; i <= index; i++) {
        this.tableData.push(
          { id: Date.now(), name: `黄${this.num}`, sex: Math.floor(Math.random() * 2), dep: '总裁办' }
        )
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
